<template>
  <div>
    <div class="page-header">
      <h1> 机构管理
        <small>
          <i class="ace-icon fa fa-angle-double-right"></i> 机构管理
        </small>
      </h1>
    </div>

    <div class="row">
      <div class="col-xs-12">
        <div class="row">
          <div class="col-sm-6">
            <div class="widget-box widget-color-blue2">
              <div class="widget-header">
                <h4 class="widget-title lighter smaller">机构树</h4>
                <div class="widget-toolbar">
                  <a href="javascript:;" data-action="collapse">
                    <i class="ace-icon fa fa-chevron-up bigger-125"></i>
                  </a>
                </div>
                <div class="widget-toolbar cust-widget-toolbar">
                  <a href="javascript:;" v-on:click="openOrgInsertWindow">
                    <i class="ace-icon glyphicon glyphicon-plus"></i> 添加
                  </a>
                </div>
                <div class="widget-toolbar cust-widget-toolbar">
                  <a href="javascript:;" v-on:click="openOrgUpdateWindow">
                    <i class="ace-icon fa fa-pencil-square-o"></i> 修改
                  </a>
                </div>
                <div class="widget-toolbar cust-widget-toolbar no-border">
                  <a href="javascript:;" v-on:click="openOrgDeleteWindow">
                    <i class="ace-icon fa fa-trash-o"></i> 删除
                  </a>
                </div>
              </div>
              <div class="widget-body">
                <div class="widget-main padding-8">
                  <ul id="tree"></ul>
                </div>
              </div>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="widget-box widget-color-green2">
              <div class="widget-header">
                <h4 class="widget-title lighter smaller">机构详情</h4>
                <div class="widget-toolbar">
                  <a href="javascript:;" data-action="collapse">
                    <i class="ace-icon fa fa-chevron-up bigger-125"></i>
                  </a>
                </div>
              </div>
              <div class="widget-body">
                <div class="widget-main padding-8">
                  <form class="form-horizontal">
                    <div class="space-4"></div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label no-padding-right">父机构：</label>
                      <label class="col-sm-9 control-label cust-text-align-left">{{selectedOrg.parent.orgName}}</label>
                    </div>
									  <div class="space-4"></div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label no-padding-right"> 机构： </label>
                       <label class="col-sm-9 control-label cust-text-align-left">{{selectedOrg.data.orgName}}</label>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label no-padding-right"> 机构全称： </label>
                      <label class="col-sm-9 control-label cust-text-align-left">{{selectedOrg.data.orgFullName}}</label>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label no-padding-right" for="form-org-sort"> 显示序号： </label>
                      <label class="col-sm-9 control-label cust-text-align-left">{{selectedOrg.data.sort}}</label>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                      <label class="col-sm-3 control-label no-padding-right" for="form-org-sort"> 备注： </label>
                      <label class="col-sm-9 control-label cust-text-align-left">{{selectedOrg.data.memo}}</label>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增&修改的弹窗 -->
    <div class="modal fade" id="orgEditModal" data-backdrop="static">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            <h4 class="modal-title">{{editedOrg.id ? '编辑' : '新增'}}机构</h4>
          </div>
          <div class="modal-body">
            <div class="alert alert-warning" v-show="!editedOrg.id && editedOrg.parentId == 0">
              <strong><i class="ace-icon fa fa-exclamation-triangle"></i></strong>
              &nbsp; 正在向根机构添加下级机构！
            </div>
            <form class="form-horizontal" id="validation-form">
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-parent-org"> 父机构 </label>
                <div class="col-sm-9">
                  <input type="text" id="form-parent-org" class="form-control" v-model="editedOrg.parentName" readonly/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-org"> 机构 </label>
                <div class="col-sm-9">
                  <input type="text" id="form-org" class="form-control" v-model="editedOrg.orgName"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-org-full"> 机构全称 </label>
                <div class="col-sm-9">
                  <input type="text" id="form-org-full" class="form-control" v-model="editedOrg.orgFullName"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-org-sort"> 序号 </label>
                <div class="col-sm-9">
                  <input type="text" id="form-org-sort" v-model="editedOrg.sort"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-org-memo"> 备注 </label>
                <div class="col-sm-9">
                  <textarea class="form-control" id="form-org-memo" v-model="editedOrg.memo"></textarea>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="ace-icon fa fa-undo bigger-110"></i>放弃</button>
            <button type="button" class="btn btn-primary" v-on:click="editOrg"><i class="ace-icon fa fa-check bigger-110"></i>保存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 删除的弹窗 -->
    <div class="modal fade" id="orgDeleteModal" data-backdrop="static">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            <h4 class="modal-title">删除机构</h4>
          </div>
          <div class="modal-body">
            <div class="alert alert-danger">
              <strong><i class="ace-icon fa fa-times"></i> 警告：</strong>
              &nbsp;机构【{{selectedOrg.data.orgName}}】及其下级机构都将会被删除！
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="ace-icon fa fa-undo bigger-110"></i>放弃</button>
            <button type="button" class="btn btn-primary" v-on:click="deleteOrg"><i class="ace-icon fa fa-check bigger-110"></i>确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'org',
  data () {
    return {
      rootTree: [],
      selectedOrg: {data: {}, parent: {}}, // 机构树中被选中的机构
      editedOrg: {} // 被编辑(新增&修改)的机构
    }
  },
  mounted: function() {
    // 初始化机构树
    $('#tree').ace_tree({
      dataSource: (options, callback) => {
        let parent, orgArray;
        if(options.data == null) {
          parent = {id: 0};
          orgArray = this.rootTree;
        }else {
          parent = options.data;
          if(!options.children) options.children = [];
          orgArray = options.children;
        }

        $.ajax({
          url: "/api/sys/org/children",
          type: "POST",
          datType: "JSON",
          data: JSON.stringify({parentId: parent.id}),
          contentType: "application/json"
        }).then((result) => {
          for (let obj of result) {
            orgArray.push({
              text: obj.orgName,
              type: 'folder',
              data: obj,
              parent: parent,
              attr: {cssClass: 'cust-tree-' + obj.id}
            });
          }
          setTimeout(() => {callback({ data: orgArray })}, 300);
        });
      },
      loadingHTML:'<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
      'open-icon' : 'ace-icon fa fa-folder-open',
      'close-icon' : 'ace-icon fa fa-folder',
      'itemSelect' : true,
      'folderSelect': true,
      'multiSelect': false,
      'selected-icon' : null,
      'unselected-icon' : null,
      'folder-open-icon' : 'ace-icon tree-plus',
      'folder-close-icon' : 'ace-icon tree-minus'
    });

    // 机构树的选中事件
    $('#tree').on('selected.fu.tree', (event, data) => {
      this.selectedOrg = data.target;
    });

    // 机构树的取消选中事件
    $('#tree').on('deselected.fu.tree', (event, data) => {
      this.selectedOrg = {data: {}, parent: {}};
    });

    // 序号的步进器
    $('#form-org-sort').ace_spinner({
      value:0,
      min: 0,
      max: 1000,
      step: 1, 
      on_sides: true, 
      icon_up:'ace-icon fa fa-plus bigger-110', 
      icon_down:'ace-icon fa fa-minus bigger-110', 
      btn_up_class:'btn-success' , 
      btn_down_class:'btn-danger'
    });
  },
  methods: {
    openOrgInsertWindow: function() { // 新增机构的弹窗
      this.editedOrg = {
        parentId: this.selectedOrg.data.id == null ? 0 : this.selectedOrg.data.id,
        parentName: this.selectedOrg.data.orgName,
        sort: 0,
        orgSeq: this.selectedOrg.data.orgSeq
      };
      $('#orgEditModal').modal('show');
    },
    openOrgUpdateWindow: function() { // 修改机构的弹窗
      if(this.selectedOrg.data.id == null) { // 未选择任何机构
        $.gritter.add({
          title: '请选择一个机构',
          class_name: 'gritter-error',
          time: 4000
        });
        return;
      }
      this.editedOrg = {
        id: this.selectedOrg.data.id,
        orgName: this.selectedOrg.data.orgName,
        orgFullName: this.selectedOrg.data.orgFullName,
        parentName: this.selectedOrg.parent.orgName,
        sort: this.selectedOrg.data.sort,
        memo: this.selectedOrg.data.memo
      };
      $.gritter.removeAll();
      $('#orgEditModal').modal('show');
    },
    openOrgDeleteWindow: function() { // 删除机构的弹窗
      if(this.selectedOrg.data.id == null) { // 未选择任何机构
        $.gritter.add({
          title: '请选择一个机构',
          text: '注意：该机构及其下级机构都将被删除',
          class_name: 'gritter-error',
          time: 4000
        });
        return;
      }
      $.gritter.removeAll();
      $('#orgDeleteModal').modal('show');
    },
    editOrg: function() { // 编辑(新增&修改)机构
      $('#orgEditModal').modal('hide');
      $.ajax({
        url: "/api/sys/org/edit",
        type: "POST",
        datType: "JSON",
        data: JSON.stringify(this.editedOrg),
        contentType: "application/json"
      }).then((result) => {
        if(result.ret == 0) {
          //$('#tree .cust-tree-'+this.selectedOrg.data.id).remove();
          //this.selectedOrg = {data: {}, parent: {}};
        }
      });
    },
    deleteOrg: function() { // 删除机构
      $('#orgDeleteModal').modal('hide');
      $.ajax({
        url: "/api/sys/org/delete",
        type: "POST",
        datType: "JSON",
        data: JSON.stringify({orgSeq: this.selectedOrg.data.orgSeq}),
        contentType: "application/json"
      }).then((result) => {
        if(result.ret == 0) {
          //$('#tree .cust-tree-'+this.selectedOrg.data.id).remove();
          //this.selectedOrg = {data: {}, parent: {}};
        }
      });
    }
  }
}
</script>

<style scoped>
  .cust-text-align-left {
    text-align: left;
  }
  .cust-widget-toolbar {
    width: 72px;
    text-align: center;
  }
  .cust-widget-toolbar a{
    color: #E2E2E2;
  }
  .cust-widget-toolbar a:hover {
    color: #ffffff;
    font-size: 115%;
  }
</style>